<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.milk_shop.model.*"%>
<%@ page import="java.util.*"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>" />
<%
	List<Food> foods = (List<Food>) application.getAttribute("foods");
%>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>四季奶坊</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/httpVueLoader.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<style>
.nav-name {
	margin: 10px auto;
}

.manage-btn {
	text-align: right;
	margin-right: 100px;
	font-size: 12px
}

.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}

.food-container {
	width: 80%;
	margin: 0 25px;
}

.page {
	margin: 20px;
	text-align: right;
}
</style>
</head>

<body>
	<div id="app">
		<el-container style="height: 650px;"> <sider-component></sider-component>
		<div class="food-container">
			<div class="nav-name">
				<h2>

					<%
						String manageName;
					int foodType = (Integer) application.getAttribute("foodtype");
					if (foodType == 1) {
					%>奶茶管理<%
						} else if (foodType == 2) {
					%>咖啡管理<%
						} else if (foodType == 3) {
					%>甜品管理<%
						} else {
					%>蛋糕管理<%
						}
					%>
				</h2>
			</div>
			<div class="manage-btn">
				<el-button type="primary" @click="addDialogVisible = true" plain>添加</el-button>
			</div>
			<el-table :data="currentPageData" style="width: 100%"
				:row-class-name="tableRowClassName" @cell-dblclick="tableEdit">
			<el-table-column prop="foodImg" label="食品图" width="180">
			<template slot-scope="scope">
				<img :src="scope.row.foodImg" width="50px" height="50px">
			</template>
			</el-table-column> <el-table-column prop="name" label="食品名称" width="180">
			<template slot-scope="scope">
				<el-input v-model="scope.row.name" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column prop="orginPrince" label="原价">
			<template slot-scope="scope">
				<el-input v-model="scope.row.orginPrince" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column prop="account" label="折扣">
			<template slot-scope="scope">
				<el-input v-model="scope.row.account" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column prop="costTime" label="制作时间">
			<template slot-scope="scope">
				<el-input v-model="scope.row.costTime" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column prop="recommReason" label="推荐理由">
			<template slot-scope="scope">
				<el-input v-model="scope.row.recommReason" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column label="操作" width="180" align="center">
			<template slot-scope="scope">
				<el-button type="success" @click="modify(scope.row)" plain>更新</el-button>
				<el-button type="danger" @click="deleted(scope.row)" plain>删除</el-button>
			</template>
			</el-table-column> </el-table>
			<el-pagination background layout="prev, pager, next" :page-size="4"
				:total=" <%=foods.size()%> " @current-change="toPage"
				@prev-click="prevPage" @next-click="nextPage"> </el-pagination>

			<el-dialog title="添加" :visible.sync="addDialogVisible"> <el-form
				:model="form"> <el-form-item label="食品名称"
				:label-width="formLabelWidth"> <el-input
				v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="原价" :label-width="formLabelWidth"> <el-input
				v-model="form.orginPrince" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="折扣" :label-width="formLabelWidth"> <el-input
				v-model="form.account" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="制作时间" :label-width="formLabelWidth"> <el-input
				v-model="form.costTime" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="推荐理由" :label-width="formLabelWidth"> <el-input
				v-model="form.recommReason" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="食品图地址" :label-width="formLabelWidth"> <el-input
				v-model="form.foodImg" autocomplete="off"></el-input> </el-form-item> </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addData(form)">确 定</el-button>
			</div>
			</el-dialog>
		</div>
		</el-container>
	</div>
	<script>
    Vue.use(httpVueLoader);

    new Vue({
      el: "#app",
      components: {
        'sider-component': 'url:component/SiderNav.vue',
      },
      created: function(){
          this.setCurrentPageData();
      },
      methods: {
        tableRowClassName({row,rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
              return 'success-row';
            }
            return '';
         },
        deleteData: {

        },// 设置当前页面数据
        setCurrentPageData:function() {
            // 计算一共有几页
             this.totalPage = Math.ceil(this.foodsSize / this.pageSize);
            // 计算得0时设置为1
             this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            console.log(this.totalPage);
             let begin = (this.currentPage - 1) * this.pageSize;
             let end = this.currentPage * this.pageSize;
             console.log(begin);
             console.log(end);
             this.currentPageData = this.tableData.slice(
                 begin,
                 end
             );
         },
         //上一页
         prevPage: function(){
             console.log(this.currentPage);
             if (this.currentPage == 1) return;
              this.currentPage--;
              this.setCurrentPageData();    
         },
         // 下一页
         nextPage: function(){
             if (this.currentPage == this.totalPage)return ;
              this.currentPage++;
              this.setCurrentPageData();
         },
         //跳转到固定页
         toPage: function(page){
             if (page > this.totalPage || page < 1)return ;
             this.currentPage = page;
             this.setCurrentPageData();
         }
      },
      data: {
        disabled: false,
        addDialogVisible: false,
        modifyDialogVisible: false,
        deleteDialogVisible: false,
        foodsSize: <%=foods.size()%>, //所有数据
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 4, // 每页显示数量
        currentPageData: [], //当前页显示内容
        tableData:
        	   [
                   <%for (int i = 0; i < foods.size(); i++) {
	// System.out.println(foods.get(i).getName()+"  "+foods.get(i).getPrice());%>{
                  		  foodImg:'<%=foods.get(i).getCover()%>',
                  		  id:'<%=foods.get(i).getId()%>',
                  		  name: '<%=foods.get(i).getName()%>',
                          orginPrince: '<%=foods.get(i).getPrice()%>',
                          account:'<%=foods.get(i).getDisCount()%>',
                          costTime: '<%=foods.get(i).getTime()%>',
                          recommReason: '<%=foods.get(i).getReason()%>',
                          foodType: '<%=foods.get(i).getFoodType()%>'},
                  	 <%}%>
              ]
        	,
        form: {
          name: '',
          orginPrince: '',
          account: "",
          costTime: "",
          recommReason: "",
          foodImg: "",
        },
        formLabelWidth: '120px'
      },
      methods:{
    	  // 设置当前页面数据
          setCurrentPageData:function() {
              // 计算一共有几页
               this.totalPage = Math.ceil(this.foodsSize / this.pageSize);
              // 计算得0时设置为1
               this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
              console.log(this.totalPage);
               let begin = (this.currentPage - 1) * this.pageSize;
               let end = this.currentPage * this.pageSize;
               console.log(begin);
               console.log(end);
               this.currentPageData = this.tableData.slice(
                   begin,
                   end
               );
           },
           //上一页
           prevPage:function(){
               console.log(this.currentPage);
               if (this.currentPage == 1) return;
                this.currentPage--;
                this.setCurrentPageData();    
           },
           // 下一页
           nextPage:function(){
               if (this.currentPage == this.totalPage)return ;
                this.currentPage++;
                this.setCurrentPageData();
           },
           //跳转到固定页
           toPage:function(page){
               if (page > this.totalPage || page < 1)return ;
               this.currentPage = page;
               this.setCurrentPageData();
           },
           //添加数据
           addData:function(form){
     		  window.location.href="foodManage/foodManage_add?food.name="+form.name+"&food.price="+form.orginPrince
     				  +"&food.disCount="+form.account+"&food.time="+form.costTime+"&food.reason="
     				  +form.recommReason+"&food.foodType="+<%=foodType%>+"&type="+<%=foodType%>+"&food.cover="+form.foodImg;   
     	  },
     	  modify:function(form){
     		  <%int type = (Integer) application.getAttribute("foodtype");%>
             window.location.href="foodManage/foodManage_modify?food.id="+form.id+"&food.foodType="
            		 +form.foodType+"&food.name="+form.name+"&food.price="+form.orginPrince
            		 +"&food.disCount="+form.account+"&food.time="+form.costTime+"&food.reason="
            		 +form.recommReason+"&food.cover="+form.foodImg+"&type="+<%=foodType%>;   
     	  },
           deleted:function(form){
         	  window.location.href="foodManage/foodManage_delete?food.id="+form.id+"&type="+<%=foodType%>;   
           },
        handleRemove(file) {
          console.log(file);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleDownload(file) {
          console.log(file);
        }
      }
    })
  </script>
</body>

</html>